// 我们之前将数据从父组件传递给封装的组件，这里我们使用State来管理组件本身的状态(数据)
import React, {Component} from 'react';

class Clock extends Component {

    // 添加一个类构造函数来初始化状态 this.state，构造函数是唯一能够初始化 this.state 的地方。
    constructor(props){
        super(props);
        this.state = {
            date: new Date(),
            user: props.data
        }
    }

    // 组件的生命周期钩子函数
    componentDidMount(){
        // 我们在这个生命周期钩子中，开启一个定时器
        this.timerId = setInterval(() => {
            this.tick();
        },1000)
    }

    componentWillUnmount(){
        // 在这个生命周期钩子中，卸载定时器(销毁组件时关闭定时器以保证性能)
        clearInterval(this.timerId);
    }

    // 我们来写tick方法来改变当前组件的状态，React会渲染对应的组件。
    tick(){
        // 改变this.state中的状态的唯一方法是调用this.setState()方法
        this.setState({
            date: new Date()
        })


        // tips: 因为this.props和this.state可能是异步更新的，不能依赖它们的值来计算下一个状态，比如以下代码可能无法更新计算器：
        this.setState({
            counter: this.state.counter + this.props.increment
        })
        // 使用第二种形式的setState()来接受一个函数而不是一个对象,该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数：
        this.setState((prevState, props) => ({
            conunter: prevState.counter + props.increment
        }));
        // tips: 上面的箭头函数(ES6)，也可以用常规的函数方式来写
    }



    render(){
        // 在 render() 方法中使用 this.state.date 替代 this.props.date
        // 在外部调用Clock组件中，删除date属性。这样，就完成了组件状态(数据)私有化。
        return (
            <div>
                <h2>
                    现在是 {this.state.date.toLocaleTimeString()}点，我是Clock组件
                    <p>props:{this.state.user}</p>
                </h2>
            </div>
        )
    }

}

export default Clock;

// 在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。

// 每当Clock组件第一次加载到DOM中的时候，我们都想生成定时器，这在React中被称为挂载。

// 同样，每当Clock生成的这个DOM被移除的时候，我们也会想要清除定时器，这在React中被称为卸载。







/*
    当 <Clock /> 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。 由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。 我们稍后会更新此状态。

    React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。

    当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。 在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。

    浏览器每秒钟调用 tick() 方法。 在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新DOM。

    一旦Clock组件被从DOM中移除，React会调用componentWillUnmount()这个钩子函数，定时器也就会被清除。
*/